<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 表单
                </el-breadcrumb-item>
                <el-breadcrumb-item>基本表单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box"  style="width: 75%;margin: auto">
                <el-form :inline="true" ref="form" :model="apply" label-width="auto" style="text-align: justify">

                    <el-form-item label="标题:" style="display: block;">
                        <b size="mini" style="font-size: large" v-text="apply.applyTitle" ></b>
                    </el-form-item>

                    <el-form-item label="类型:" style="margin-top: 35px;display: inline">
                        <el-input size="mini" disabled="disabled" v-model="apply.applyType"></el-input>
                    </el-form-item>

                    <el-form-item label="编号:">
                        <el-input size="mini" disabled="disabled" v-model="apply.applyNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="金额:">
                        <el-input size="mini" disabled="disabled" v-model="apply.fundDemand"></el-input>
                    </el-form-item>
                    <el-form-item label="提交时间:">
                        <el-input size="mini" disabled="disabled" v-model="apply.submitDate"></el-input>
                    </el-form-item>
                    <el-form-item label="内容:" label-width="auto">
                        <p size="mini" style="text-align: justify;text-indent:2em;" v-text="apply.applyContent"></p>
                    </el-form-item>
                    <br>

                    <el-form-item label="附件:">
                        <a :href="apply.fileUrl" v-text="apply.fileName"><i class="el-icon-s-data"></i></a>
                        <span v-show="handleStatus!=''">(已<span v-text="handleStatus"></span>)</span>
                    </el-form-item>
                    <el-form-item style="margin: 0 auto">
                        <br>
                        <el-button type="primary" :disabled='isDisabled' @click="onSubmit(apply.applyNumber,$event)">通过</el-button>
                        <el-button type="danger"  :disabled='isDisabled' @click="onSubmit(apply.applyNumber,$event)">驳回</el-button>
                        <span v-bind:title="`:-)手抖了?点此重置`" v-show="notDisabled" @click="reSetButton" style="margin-left: 1em;">
                            <el-button size="small" type="primary" icon="el-icon-refresh" >

                            </el-button>
                        </span>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import store from '../../VueX/store.js'

    export default {
    name: 'baseform',
    data() {
        return {
            applies:[],
            apply:{},
            id:0,
            // disabled:true,
            isDisabled:false,
            notDisabled:false,
            handleStatus:"",
        };
    },
    store,
    methods: {
        // 页面操作提示
        openVn(msg) {
            const h = this.$createElement;
            this.$message({
                message: h('p', null, [
                    h('span', null, msg),
                    h('i', { style: 'color: green' }, '')
                ])
            });
        },
    // 处理申请的驳回和通过
    onSubmit(applyNumber,status) {
            let _this = this;
        console.log(status.target.innerText+applyNumber);
        let params = new URLSearchParams();
        params.append('applyNumber',applyNumber);
        params.append('applyStatus',status.target.innerText);
        this.$axios.post('business/handleStatus',params,{}).then(function(response){
            console.log("post('business/handleStatus')成功:"+response);
            _this.openVn('已成功'+status.target.innerText+'编号：【'+applyNumber+'】的工单');
            // console.log('status.target:'+status.target.disabled);
            _this.isDisabled = true;
            _this.notDisabled = true;
            _this.handleStatus = status.target.innerText
        }).catch(function(erro){
            console.log("post('business/handleStatus')出错了:"+erro);
        })
        // store.commit('changeMessage');
        // alert(store.state.message);
        // this.$message.success('提交成功！');
        },
        reSetButton(){
            let _this = this;
            _this.isDisabled = false;
            _this.notDisabled = false;
            _this.handleStatus = '';
            _this.openVn('已重置');
        },
    },


        /**
         * 页面加载后立即向后端发送请求接受所需数据
         */
        created(){
            let _this = this;
            // 上一个页面传过来合同编号，根据该编号去数据查询信息
            // alert("_this.$route.query.applyNumber："+this.$route.query.applyNumber);
            // alert(this.$axios);
            let params = new URLSearchParams();
            // params.append('applyNumber',this.$route.query.applyNumber);
            params.append('applyNumber',this.$route.query.applyNumber);
            this.$axios.post('business/getByApplyNumber',params,{})
                .then(
                    function(response) {
                        _this.apply = response.data;
                        console.log("_this.apply:"+_this.apply);
                    }
                ).catch()
        },
};
</script>